<template>
    <div class="contentPage">
        <div class="noPc" style="height: 6px;background: #F2F2F2;width: 100%"></div>
        <van-notice-bar class="notice-scroll" left-icon="volume-o" :scrollable="false">
            <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="4000"
                :touchable="false"
                :show-indicators="false"
            >
                <van-swipe-item v-for="(item,index) in params.loginInfo" :key="index">
                    <div class="tips" :style="{fontSize: '12px',color: item.isLogin?'':'red'}" v-if="item.isLogin">
                        *
                        {{ item.plamtName }}
                        数据更新于
                        {{ item.syncAt }}
                    </div>
                    <div class="tipsNo" v-else :style="{fontSize: '12px',color: item.isLogin?'':'red'}">*
                        数据更新延迟，处理后将重新获取数据
                    </div>
                </van-swipe-item>
            </van-swipe>
        </van-notice-bar>
        <div class="mobile">
            <div class="search">
                <div class="searchInput"><input type="text" v-model="params.mallName" placeholder="输入店铺名称搜索"/>
                </div>
                <div class="searchBtn" @click="search()">搜索</div>
                <div class="searchBtn" @click="params.showPopup = true">总看板</div>
            </div>
            <div style="display: flex;align-items: center;justify-content: space-between">
                <div class="tabs">
                    <div @click="changeTabs(item.key)"
                         :class="params.tabsActive-1 === item.key ? 'active tabsItem':'tabsItem'"
                         v-for="(item,index) in params.tabs" :key="index">{{ item.name }}
                    </div>
                </div>
                <div style="font-size: 11px;border: 1px solid #000;border-radius: 4px;padding: 4px 8px;background: #fff"
                     class="btn" @click="toStatistics()">回本统计
                </div>
            </div>
            <div class="list">
                <van-pull-refresh class="listRefresh" v-model="params.loading"
                                  @refresh="onRefresh">
                    <van-list
                        v-model="params.bottomLoading"
                        :finished="params.finished"
                        style="height: 90%"
                        finished-text="没有更多了"
                        loading-text="加载中..."
                        @load="onLoad"
                    >
                        <div class="listItem" v-for="(item,index) in params.list" :key="index"
                             @click="toDetail(item)">
                            <div class="title">
                                <div class="titleCard">
                                    <span>
                                        <a-tag :color="getStatus(item.incom_status)?.color">{{
                                                getStatus(item.incom_status)?.name
                                            }}
                                        </a-tag>
                                    </span>
                                    <span style="display: inline-block;width: 120px">{{ item.mall.name }}</span>
                                </div>
                                <div class="time" v-if="item.incom_status === 0">预计回本：{{
                                        item.back_date
                                    }}
                                </div>
                            </div>
                            <div class="line">
                                <div>
                                    <span class="desc">回本金额：</span>
                                    <span>{{ params.data.my.isShow? item.my_back_money :item.back_money }}</span>
                                </div>
                                <div>
                                    <span class="desc">出资金额：</span>
                                    <span>{{ item.my_money }}</span>
                                </div>
                            </div>
                            <div class="line">
                                <div>
                                    <span class="desc">回本比例：</span>
                                    <span>{{ params.data.my.isShow?item.my_back_money_rate :item.back_rate }}%</span>
                                </div>
                                <div>
                                    <span class="desc">收益比例：</span>
                                    <span>{{ item.income_rate }}%</span>
                                </div>
                            </div>
                            <div class="line">
                                <div>
                                    <span class="desc">收益金额：</span>
                                    <span>{{ params.data.my.isShow? item.my_money : item.money }}</span>
                                </div>
                                <div>
                                    <span class="desc">应收总额：</span>
                                    <span>{{ params.data.my.isShow? item.my_all_money : item.all_money }}</span>
                                </div>
                            </div>
                            <div class="line">
                                <div>
                                    <span class="desc">回本效率：</span>
                                    <span>{{ !params.data.my.isShow? item.all_end_back_date : item.my_end_back_date }}</span>
                                </div>
                            </div>
                            <div class="line">
                                <div>
                                    <span class="desc">联营开始日期 ：</span>
                                    <span>{{ item.show_date }}</span>
                                </div>
                            </div>

                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <div class="pc">
            <div class="pcTitleContent">
                <div class="tips">
                    <img src="../../assets/logo.png" style="width: 40px" alt=""> <span>项目收益表</span>
                </div>
                <div class="pcTableBox" style="display: flex">
                    <table class="pcTable">
                        <tbody class="pcTbody">
                        <tr>
                            <!--                            <td v-if="params.data.money >= params.data.backMoney">预计回本</td>-->
                            <td>总回款金额</td>
                            <td>总回本比例</td>
                            <td>总收益金额</td>
                            <td>总出资金额</td>
                            <td>平均收益率</td>
                            <td>总应收金额</td>
                        </tr>
                        <tr>
<!--                            <td>{{ params.data.backMoney }}</td>-->
                            <td>{{ params.data.my.isShow? params.data.my.backMoney:params.data.backMoney }}</td>

                            <td>{{ params.data.my.isShow ? params.data.my.backMoneyRate : params.data.backRate }}%</td>
                            <td>{{ params.data.incomeMoney }}</td>
                            <td>{{ params.data.my.isShow? params.data.my.money:params.data.money }}</td>
                            <td>{{ params.data.incomeRate }}%</td>
                            <td>{{ params.data.my.isShow? params.data.my.allMoney:params.data.alleMoney }}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div style="padding: 12px;white-space: nowrap;text-align: center">
                        <div>{{ params.userInfo.phone }}</div>
                        <div @click="logout()"
                             style="border: 1px solid #7d7d7d;border-radius: 4px;padding: 6px 12px;margin-top: 12px;cursor: pointer;font-size: 12px">
                            退出登录
                        </div>
                    </div>
                </div>
            </div>
            <div class="search">
                <div style="width: 350px">
                    <van-notice-bar class="notice-scroll-pc" left-icon="volume-o" :scrollable="false">
                        <van-swipe
                            vertical
                            class="notice-swipe"
                            :autoplay="4000"
                            :touchable="false"
                            :show-indicators="false"
                            color="#ffffff"
                        >
                            <van-swipe-item v-for="(item,index) in params.loginInfo" :key="index">
                                <div class="tips" :style="{fontSize: '12px',color: item.isLogin?'':'red'}"
                                     v-if="item.isLogin">*
                                    {{ item.plamtName }}
                                    数据更新于
                                    {{ item.syncAt }}
                                </div>
                                <div class="tipsNo" v-else :style="{fontSize: '12px',color: item.isLogin?'':'red'}">*
                                    数据更新延迟，处理后将重新获取数据
                                </div>
                            </van-swipe-item>
                        </van-swipe>
                    </van-notice-bar>
                </div>
                <!--                <div style="width: 100%;margin-bottom: 12px" v-if="params.loginInfo.isLogin">* 数据更新于-->
                <!--                    {{ params.loginInfo.syncAt }}-->
                <!--                </div>-->
                <!--                <div style="width: 100%;margin-bottom: 12px;color: red" v-else>* 数据更新延迟，处理后将重新获取数据</div>-->
                <div class="left">
                    <a-input style="width: 200px" v-model:value="params.mallName" allow-clear
                             placeholder="输入店铺名称搜索"></a-input>
                    <a-select style="width: 200px;margin: 0 12px" allow-clear v-model:value="params.status">
                        <a-select-option v-for="(item,index) in params.tabs" :key="index" :value="item.key+1">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                    <div class="btn" style="background: #81d3f8" @click="changeTabsPc(params.status)">查询</div>
                    <div class="btn" style="margin-left: 12px;border: 1px solid #7d7d7d" @click="reset()">重置</div>

                </div>
                <div style="display: flex">
                    <div class="btn" style="border: 1px solid #000000" @click="toStatistics()">回款统计</div>
                    <div class="btn" style="border: 1px solid #000000;margin-left: 12px" @click="downloadFile()">
                        导出数据
                    </div>
                </div>
            </div>
            <div class="pcTableBox">
                <table class="pcTable">
                    <tbody class="pcTbody">
                    <tr>
                        <td>项目名称</td>
                        <td>联营开始日期</td>
                        <td>回款金额</td>
                        <td>回本比例</td>
                        <td>收益金额</td>
                        <td>出资金额</td>
                        <td>收益比例</td>
                        <td>应收总额</td>
                        <td>回本效率</td>

                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                    <tr v-if="params.list.length > 0" v-for="(item,index) in params.list" :key="index">
                        <td>{{ item.mall?.name }}</td>
                        <td>{{ item?.show_date }}</td>
                        <td>{{ params.data.my.isShow? item.my_back_money :item.back_money }}</td>
                        <td>{{ params.data.my.isShow?item.my_back_money_rate :item.back_rate }}%</td>
                        <td>{{ params.data.my.isShow?item.my_incom_money : item.incom_money }}</td>
                        <td>{{ params.data.my.isShow? item.my_money : item.money }}</td>
                        <td>{{ item.income_rate }}%</td>
                        <td>{{ params.data.my.isShow? item.my_all_money : item.all_money }}</td>
                        <td>{{ !params.data.my.isShow? item.all_end_back_date : item.my_end_back_date }}</td>
                        <td>
                            <a-tag :color="getStatus(item.incom_status)?.color">{{
                                    getStatus(item.incom_status)?.name
                                }}
                            </a-tag>
                        </td>
                        <td>
                            <div style="cursor: pointer" @click="toDetail(item)">查看</div>
                        </td>
                    </tr>
                    <tr v-else>
                        <td colspan='9' style="text-align: center">暂无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <van-popup v-model:show="params.showPopup" closeable round style="padding: 12px 12px;width: 90%">
            <div class="cardPopup">
                <div style="display: flex;align-items: center;margin-bottom: 12px">
                    <div>{{ params.userInfo.phone }}</div>
                    <div @click="logout()"
                         style="border: 1px solid #7d7d7d;border-radius: 4px;padding: 4px 8px;cursor: pointer;margin-left: 12px;font-size: 12px">
                        退出登录
                    </div>
                </div>
                <div style="display: flex;align-items: center;margin-top: 10px;">
                    <div v-for="(item,index) in params.tabs">
                        <a-tag style="margin-bottom: 12px" v-if="getNums(item.key) > 0" :key="index"
                               :color="getStatus(item.key)?.color">{{
                                getStatus(item.key)?.name + ' ' + getNums(item.key)
                            }}
                        </a-tag>
                    </div>
                </div>
                <div class="line" style="margin-top: 0">
                    <div>
                        <span class="desc">总回本金额：</span>
                        <span>{{ params.data.my.isShow? params.data.my.backMoney:params.data.backMoney }}</span>
                    </div>
                    <div>
                        <span class="desc">总出资金额：</span>
                        <span>{{ params.data.my.isShow? params.data.my.money:params.data.money }}</span>
                    </div>
                </div>
                <div class="line">
                    <div>
                        <span class="desc">总回本比例：</span>
                        <span>{{ params.data.my.isShow ? params.data.my.backMoneyRate : params.data.backRate }}%</span>
                    </div>
                    <div>
                        <span class="desc">平均收益率：</span>
                        <span>{{ params.data.incomeRate }}%</span>
                    </div>
                </div>
                <div class="line">
                    <div>
                        <span class="desc">总收益金额：</span>
                        <span>{{ params.data.incomeMoney }}</span>
                    </div>
                    <div>
                        <span class="desc">总应收金额：</span>
                        <span>{{ params.data.my.isShow? params.data.my.allMoney:params.data.alleMoney }}</span>
                    </div>
                </div>
                <!--                <div class="time">预计回本：{{params.data.backDate}}</div>-->
            </div>
        </van-popup>
    </div>
</template>
<script setup>
import {reactive, onMounted, computed} from 'vue'
import {getStore} from '../../api/index.js'
import router from '../../router/index'
import ScrollNotice from '../../components/scrollNotice.vue'

const params = reactive({
    showPopup: false,
    open: false,
    loading: false,
    bottomLoading: false,
    finished: false,
    tabsActive: 0,
    total: 0,
    status: 0,
    mallName: '',
    page: 1,
    pageSize: 10,
    data: {
        my: {
            isShow: false
        }
    },
    tabs: [
        {name: '全部', key: -1, color: '#FACD91'},
        {name: '回本期', key: 0, color: '#FACD91'},
        {name: '收益期', key: 1, color: '#CAF982'},
        {name: '已结束', key: 2, color: '#C280FF'},
    ],
    list: [],
    listAll: [],
    loginInfo: [],
    userInfo: {}
})
onMounted(() => {
    params.userInfo = JSON.parse(localStorage.getItem('h5-userInfo'))
    getList()
})
const onLoad = () => {
    params.finished = true
    if (params.bottomLoading) return;
    params.bottomLoading = true
    params.page += 1
    getList()
}
const logout = () => {
    localStorage.clear()
    router.push('/login')
}
const getList = () => {
    let data = {page: params.page, pageSize: params.pageSize, mallName: params.mallName}
    if (params.status - 1 >= 0) {
        data.status = params.status - 1
    }
    if (params.tabsActive - 1 >= 0) {
        data.status = params.tabsActive - 1
    }
    getStore(data).then(res => {
        params.bottomLoading = false
        params.loading = false
        params.data = res.data.allMallDatas
        params.list = res.data.mallData
        params.listAll = res.data.mallData
        params.loginInfo = res.data.loginInfo
        changeTabs(params.status ? params.status - 1 : -1)
    })
}
const downloadFile = () => {
    let data = {page: params.page, pageSize: params.pageSize, mallName: params.mallName, download: 1}
    if (params.status - 1 >= 0) {
        data.status = params.status - 1
    }
    if (params.tabsActive - 1 >= 0) {
        data.status = params.tabsActive - 1
    }
    getStore(data).then(res => {
        window.open(res.data.fileUrl, '_blank')
    })
}
const changeTabsPc = () => {
    getList()
}
const reset = () => {
    params.mallName = ''
    params.status = 0
    getList()
}
const getNums = (key) => {
    return params.listAll.filter(item => item.incom_status === key).length
}
const changeTabs = (key) => {
    params.tabsActive = key + 1
    if (key < 0) {
        params.list = params.listAll
    } else {
        let configList = []
        params.listAll.map(item => {
            if (item.incom_status === key) configList.push(item)
        })
        params.list = configList
    }
}
const search = () => {
    params.page = 1
    getList()
}
const onRefresh = (done) => {
    params.page = 1
    getList()
};
const toStatistics = (item) => {
    router.push({path: '/statistics'})
}
const toDetail = (item) => {
    router.push({path: '/detail', query: {id: item.id}})
}
const getStatus = (type) => {
    let obj = {}
    params.tabs.map(tab => {
        if (tab.key === type) obj = tab
    })
    return obj
}
</script>
<style scoped lang="less">
/* 小屏幕设备样式 */
@media only screen and (max-width: 767px) {
    @import './index-mobile.less';
}

/* 大屏幕设备样式 */
@media only screen and (min-width: 768px) {
    @import './index-pc.less';
    ::v-deep .van-notice-bar__content {
        height: 24px;
    }
}

::v-deep.van-notice-bar {
    height: 24px;
}

//::v-deep .van-notice-bar__left-icon{
//    display: none!important;
//}
//::v-deep .van-notice-bar__wrap{
//    width:  100%;
//    height: 100%;
//}
//::v-deep .van-notice-bar__content{
//    width:  100%;
//    height: 100%;
//}
//::v-deep .notice-swipe{
//    width:  100%;
//    height: 100%;
//}
</style>
